<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="250px"
    top="20vh !important"
  >
   <div class="dialog-content">
     <el-input-number
       style="width: 150px;"
       v-model="sort"
       size="small"
       :min="0"
       :precision="0"
       label="请输入排序号"
     />
   </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
  </el-dialog>

</template>

<script>
export default {
  name: "EditSortDialog",
  props: {
    title:{
      type: String,
      default: "修改排序号"
    },
    dialogVisible:{
      type: Boolean,
      default: false
    },
    value:{
      type: [Number,Object],
      default: 0
    }
  },

  data(){
    return{
      sort:0
    }
  },
  computed:{
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(value) {
         this.$emit("setDialogVisible", value);
        // 关闭后弹框值改回原来，解决修改后没点确定导致再次打开修改时没有触发watch，计数框值对不上当前行的值
         this.sort = this.value;
        return
      }
    }
  },
  methods:{
    confirm(){
      this.$emit("sort-confirm", this.sort);
      this.visible = false;
    }
  },
  watch:{
    value(newValue){
      this.sort = newValue;
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
